<template>
  <div class="container">
    <div class="actionBtn">
      <el-button type="primary" @click="add">新增</el-button>
    </div>
    <el-table :data="tableData">
      <el-table-column type="index" width="50" />
      <el-table-column prop="tagid" label="标签ID"></el-table-column>
      <el-table-column prop="tagname" label="标签名称"></el-table-column>
      <el-table-column label="类型">
        <template #default="scope">
          {{scope.row.islable==0?"标签":'分类'}}
        </template>
      </el-table-column>
      <el-table-column prop="order" label="排序"></el-table-column>
      <el-table-column label="操作" align="center" width="150" fixed="right">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleClick(scope.row, 1)" :disabled="!scope.row.tagid">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleClick(scope.row, 2)" :disabled="!scope.row.tagid">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="新增/编辑" width="500" :before-close="handleClose">
      <el-form :model="formInline" label-width="80" ref="formRef" :rules="rules">
        <el-form-item label="标签名称" prop="tagname">
          <el-input v-model="formInline.tagname" placeholder="请输入标签名称" clearable />
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="formInline.order" placeholder="请输入排序" clearable />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submitForm">
            确 认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
//counter
import useCounterStore from "@/store/counter";
import { onMounted } from "vue";
const counter = useCounterStore();

let dialogVisible = ref(false);

let tableData = ref([]);
let formInline = ref({
  tagid: "",
  tagname: "",
  order: "",
});

const rules = ref({
  tagname: [{ required: true, message: "请输入标签名称", trigger: "blur" }],
});

onMounted(() => {
  getInfo();
});

function add() {
  formInline.value.order = tableData.value.length + 1;
  dialogVisible.value = true;
}

async function handleClick(row, num) {
  switch (num) {
    case 1:
      formInline.value = proxy.$utils.formatFunction(row, {
        ...formInline.value,
      });
      dialogVisible.value = true;
      break;
    case 2:
      let resp = await proxy.$utils.confirmTips("是否删除该标签？");
      if (!resp) return;
      await proxy.$apis.moxueyuanTags({
        type: "delete",
        data: { tagid: row.tagid },
      });
      proxy.$utils.showToast("删除成功");
      getInfo();
      break;
    default:
      break;
  }
}

async function submitForm() {
  if (!proxy.$refs.formRef) return;
  await proxy.$refs.formRef.validate((valid, fields) => {
    if (valid) {
      save();
    } else {
      console.log("error submit!", fields);
    }
  });
}

async function save() {
  if (formInline.value.tagid) {
    await proxy.$apis.moxueyuanTags({ type: "update", data: formInline.value });
    proxy.$utils.showToast("编辑成功");
  } else {
    formInline.value.tagid = generateUniqueId();
    await proxy.$apis.moxueyuanTags({ type: "add", data: formInline.value });
    proxy.$utils.showToast("新增成功");
  }
  handleClose();
}

async function getInfo() {
  tableData.value = await proxy.$apis.moxueyuanTags({ type: "list" });
}

function handleClose() {
  if (proxy.$refs.formRef) proxy.$refs.formRef.resetFields();
  formInline.value = {
    tagid: "",
    tagname: "",
    order: "",
  };
  getInfo();
  dialogVisible.value = false;
}

function generateUniqueId(): string {
  const timestamp = Date.now(); // 获取当前时间戳
  const randomNum = Math.floor(Math.random() * 10000); // 生成一个随机数
  return `${timestamp}-${randomNum}`; // 返回唯一 ID
}
</script>



<style lang="scss" scoped>
.container {
  margin: 20px;
  .actionBtn {
    margin-bottom: 15px;
  }
}
</style>



